<template>
  <div class="preview-wrapper">
    <el-dialog title="预览" :visible.sync="visible">
      <div class="model-wrapper" v-if="modelLink">
        <iframe name="model_view" id="model_view" :src="modelLink" frameborder="0" scrolling="auto"></iframe>
      </div>
      <div class="tips" v-else>当前没用任何可预览链接</div>
    </el-dialog>
  </div>
</template>
<script>
  import ApiClient from '@/utils/ApiClient';

  export default {
    components: {},
    props: {
      id: null,
      previewDialogShow: { type: Boolean, default: false }
    },
    data() {
        return {
          form: {
            number:'',
            mainTitle: '',
            subheading: '',
            size: '',
            tag: '',
            exhibitTypeId: null,
            content: '',
            mainImgUrl: '',
            bExhibitGalleryDtoList: [],
            bExhibitModelImgDtoList: [],
            fileUrlObj: '',
            fileUrlObjName: '',
            fileUrlMtl: '',
            fileUrlMtlName: '',
            state: false,
            qrCode:'',
            displayMode:'',
          },
          modelLink: ``, // 预览链接
          scrolling: 'no'
        }
    },
    computed: {
      visible: {
        get: function(){ return this.previewDialogShow },
        set: function(val){ this.$emit("update:previewDialogShow",val) }
      },
    },
    mounted() {
      // 如果是编辑，则取数据
      let id = this.id || 0;
      ApiClient.get(`/backend/exhibit/${id}/detail.do`).then((data) => {
        this.form = Object.assign({},this.form,data);
        this.modelLink =  this.form.displayMode
          ? `${process.env.API_URL_BASE}/files/index.html?mtl=${this.form.fileUrlMtlName}&obj=${this.form.fileUrlObjName}`
          : this.form.qrCode;
      })
    }
  }
</script>
<style lang="scss" scoped>
  .preview-wrapper{
    .model-wrapper{
      iframe{
        width: 100%;
        height: 400px;
      }
    }
    .tips{
      padding: 30px 10px;
      height: 40px;
      text-align: center;
      letter-spacing: 2px;
    }
  }
</style>
